<template>
    <div class="template">
        <div class="temMain">
            <div class="nav">
                <img :src="back" style="width: 37px;" @click="router.back()"/>
                <img :src="Store" style="width: 80px;height: 25px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"/>
                <div class="lookNum">
                    <img :src="store_coins_icon" style="width: 32px;height: 32px;margin-right: 5px;"/>
                    {{ coinsNum }}
                </div>
            </div>
            <div style="width: 100%;height: 83vh; margin-top: 10px;position: relative;">
                <img :src="store_bg" style="width: 100%;height: 100%;" />
                <div style="position: absolute;top: 0;left: 0;width: 100%;">
                    <img :src="store_txt" style="width: 229px;margin-top: 40px;margin-left: 10px;"/>
                    <div class="buyList">
                        <div v-for="(item, index) in buyList" :key="index" style="flex-shrink: 0;margin-bottom: 15px;position: relative;width: 135px;height: 166px;" @click="buyItem(index)">
                            <img :src="store_coins_img" style="width: 135px;height: 166px;"/>
                            <div class="money" style="bottom: 38px;right: 8px;">{{ item.money }} $</div>
                            <div class="num">{{ item.num }} Coins</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import back from '../assets/back.png'
import Store from '../assets/Store.png'
import store_coins_icon from '../assets/store_coins_icon.png'
import store_bg from '../assets/store_bg.png'
import store_txt from '../assets/store_txt.png'
import store_coins_img from '../assets/store_coins_img.png'
let buyList = [{num: 20, money: 1.99 },{num: 50, money: 2.99 },{num: 100, money: 4.99 },{num: 200, money: 9.99 }]
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue'
import { showToast, showLoadingToast, closeToast } from 'vant';
import {Base64} from 'js-base64'
const coinsNum = ref(0)
const router = useRouter()
const buyItem = (index) => {
    showLoadingToast({
      duration: 0,
      message: 'Loading...',
      forbidClick: true,
    });
     window['iap'] = (data) => {
            let res;
            try {
                const decodedString = Base64.decode(data);
                res = JSON.parse(decodedString);
            } catch (error) {
                res = data;
            }
            if (res !== null && typeof res === 'object') {
                let num = res.productIdentifier.replace(/\D/g, '');
    			coinsNum.value = coinsNum.value + Number(num)
                localStorage.setItem('CPCoinsNum', coinsNum.value)
    			closeToast()
            } else {
                closeToast()
                showToast('Payment failed!');
            }
            return 0;
    }
    window['send'](`terms://buy?product=com.moreuse.edtings.${buyList[index].num}s&num=1`);
}

onMounted(() => {
    coinsNum.value = localStorage.getItem('CPCoinsNum') ? Number(localStorage.getItem('CPCoinsNum')) : 0

})
</script>
<style scoped>

.lookNum {
    min-width: 75px;
    height: 38px;
    background: #013F4E;
    border-radius: 42px 42px 42px 42px;
    padding: 0 7px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 15px;
    color: #FFFFFF;
}
.buyList {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 10px;
}
.money {
    position: absolute;
    /* top: 98px; */
    bottom: 37px;
    right: 8px;
    font-weight: 600;
    font-size: 18px;
    color: #013F4E;
}
.num {
    font-weight: 400;
    font-size: 20px;
    color: #FFFFFF;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}
</style>